<script setup lang="ts">
let display = ref('grid')

</script>

<template>
  <div class="wrap">
    <div class="grid__container">
      <div class="grid__item"></div>
      <div class="grid__item"></div>
      <div class="grid__item"></div>
      <div class="grid__item"></div>
    </div>
    <form action="">

      <span>display:</span>
      <label for="grid">
        <input v-model="display" value="grid"  id="grid" type="radio" name="display" checked>
        grid
      </label>
      <label for="inline-grid">
        <input v-model="display"  value="inline-grid" id="inline-grid"   type="radio" name="display" >
        inline-grid
      </label>
    </form>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  padding: 1rem;

  .grid__container {
    --display: v-bind(display);
    display: var(--display);
    border: 1px dashed #f36;
    box-shadow: 0 0 0 6px  rgba(0 0 0 / 13%);
    border-radius: 1px;

    .grid__item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      background-color: #f7f7f7;
      counter-increment: item; // 定义计数器
      border: 2px solid #2938e9;
      border-radius: 4px;
      color: #000;
      padding: 1rem;

      &::before {
        content: counter(item); // 使用计数器
        color: #fff;
        font-size: 3rem;
        text-shadow: 1px 1px 0 rgba(0 0 0 / 0.25);
      }
      &:nth-child(1) {
        background-color: #f1c2c6;
      }
      &:nth-child(2) {
        background-color: #dac2f1;
      }
      &:nth-child(3) {
        background-color: #ccf1c2;
      }
      &:nth-child(4) {
        background-color: #c2e9f1;
      }
    }
  }

  form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    gap: 10px;

    label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
  }
}

</style>
